<template>
  <div ref="videoWrapRef" class="video-item">
    <div class="video-header">
      <div class="title">测试设备test00382674</div>
      <div class="info">
        <div class="text">1920*1080P</div>
        <div class="text">60fps</div>
        <div class="text">680kb/s</div>
      </div>
    </div>
    <div class="video-box">
      <video-view
        ref="videoRef"
        :url="url"
        @load="handleLoad"
        @play="handlePlay(true)"
        @pause="handlePlay(false)"
      ></video-view>
      <svg-icon v-if="!isPlaying" class="play-icon" name="video-play_big" @click="changePlay"></svg-icon>
    </div>
    <div class="btn-wrap">
      <svg-icon class="icon" :name="statusIcon" @click="changePlay"></svg-icon>

      <div class="right-wrap">
        <svg-icon class="icon" name="video-fullscreen" @click="changeFullscreen"></svg-icon>
        <t-dropdown
          :options="[
            { content: 'Main', value: 'Main' },
            { content: 'Second', value: 'Second' },
          ]"
          placement="top"
          :on-click="handleClickDropdownItem"
        >
          <div class="code-rate">{{ codeRateValue }}</div>
        </t-dropdown>
        <svg-icon class="icon" name="video-del" @click="changeDel"></svg-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

import VideoView from './VideoPlayer.vue';

defineProps({
  url: {
    type: String,
    default: '',
  },
});

const emits = defineEmits(['del']);

const videoWrapRef = ref();
const videoRef = ref<InstanceType<typeof VideoView>>();
const isPlaying = ref(true);

const player = ref(null);
const codeRateValue = ref('Main');

const statusIcon = computed(() => {
  return !isPlaying.value ? 'video-play' : 'video-pause';
});

const handleClickDropdownItem = (data: any) => {
  codeRateValue.value = data.value;
};

const handleLoad = () => {
  player.value = videoRef.value.player;
};

const handlePlay = (bool: boolean) => {
  isPlaying.value = bool;
};

const changePlay = () => {
  isPlaying.value ? player.value.pause() : player.value.play();
};

const changeFullscreen = () => {
  player.value.getFullscreen();
};

const changeDel = () => {
  emits('del');
};
</script>

<style lang="less" scoped>
.video-item {
  width: 736px;
  height: 348px;
  border-radius: 10px;
  position: relative;

  &:hover {
    .video-header {
      background: rgb(0 0 0 / 30%);

      .info {
        display: flex;
      }
    }
  }

  .video-header {
    width: 100%;
    height: 41px;
    border-radius: 10px 10px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px 0 28px;

    .info {
      display: none;
      gap: 50px;

      .text {
        font-size: 12px;
      }
    }
  }

  .video-box {
    width: 100%;
    height: calc(100% - 41px);
    position: relative;

    .video-view {
      border-radius: 10px;
    }

    .play-icon {
      width: 84px;
      height: 84px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .btn-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 41px;
    background: #fff;
    z-index: 999;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;

    .icon {
      width: 24px;
      height: 24px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;

      .code-rate {
        height: 24px;
        padding: 0 4px;
        border-radius: 5px;
        background: #a5b4cb;
        line-height: 24px;
        color: #fff;
        font-size: 12px;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
